<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全部商品</title>
    <link rel="icon" type="image/png" sizes="16x16" href="../../static/icons/favicon.svg">

    <link rel="stylesheet" href="{{ url_for('static', filename='base.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='user/css/home.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='user/css/about.css') }}">
    <link rel="stylesheet" href="../../static/page.css">
    <script src="../../static/jQuery.js"></script>
    <script src="../../static/user/js/nav.js"></script>
</head>
<body>
<!-- header section strats -->
<div class="header">
    <div class="w">
        <a class="index" href="{{ url_for('user.index') }}">
            <span>
              Store
            </span>
        </a>
        <ul class="list">
            <li class="part">
                <a class="link" href="{{ url_for('user.index') }}">首页</a>
            </li>
            <li class="part">
                <a class="link" href="{{ url_for('user.car') }}">购物车</a>
            </li>
            <li class="part">
                <a class="link" href="{{ url_for('user.orders') }}">我的订单</a>
            </li>
            <li class="part curr">
                <a class="link" href="{{ url_for('user.about') }}">全部商品</a>
            </li>
            <li class="part search-li">
                <form action="{{ url_for('user.search') }}" method="get">
                    <input class="search" type="text" name="keyword" value="" placeholder="书名/作者名">
                    <button type="submit">
                        <img class="search-icon" style="width: 20px;height: 20px;" src="../../static/icons/search.svg">
                    </button>
                </form>
            </li>
            <li class="part">
                {% if user %}
                <a href="javascript:;" class="logout">
                    欢迎，{{ user.name }}
                </a>
                {% else %}
                <a class="link" href="{{ url_for('user.login') }}">
                    登录
                </a>
                {% endif %}
            </li>
        </ul>
    </div>
</div>
<!-- end header section -->

<div class="container clearfix">
    <div class="left">
        <ul>
            {% for book in books %}
            <li>
                <div class="item">
                    <div class="img">
                        <a href="{{ url_for('user.detail',book_id = book.book_id) }}"><img src="{{ book.photo }}"
                                                                                           alt="">
                        </a>
                    </div>
                    <div class="desc">
                        <a href="{{ url_for('user.detail',book_id = book.book_id) }}">{{ book.book_name }}</a>
                        <p class="info">作者：{{book.book_author}}&nbsp;&nbsp;|&nbsp;&nbsp;出版社：{{book.derive}}&nbsp;&nbsp;|&nbsp;&nbsp;价格：{{book.price}}</p>
                        <p class="description">{{book.desc}}</p>
                    </div>
                </div>
            </li>
            {% endfor %}
        </ul>

    </div>
    <div class="right">

        <div>
            <div>{{ chart3|safe }}</div>
        </div>
        <div>
            <div class="four">{{ chart4|safe }}</div>
        </div>
    </div>
</div>
<div class="pagination">
    <!-- 左侧箭头 -->
    {% if page.has_prev %}
    <a href="{{ url_for('user.about', page=page.prev_num) }}" class="pagination-arrow" id="prev-page"
       aria-label="Previous Page"><</a>
    {% else %}
    <a href="javascript:;" class="pagination-arrow" aria-label="Previous Page"><</a>
    {% endif %}
    {% for p in page.iter_pages(left_edge=1, right_edge=1, left_current=1, right_current=2) %}
    {% if p %}
    {% if p == page.page %}
    <a href="{{ url_for('user.about', page=p) }}" class="current-page">{{ p }}</a>
    {% else %}
    <a href="{{ url_for('user.about', page=p) }}">{{ p }}</a>
    {% endif %}
    {% else %}
    <span class="ellipsis">...</span>
    {% endif %}
    {% endfor %}
    <!-- 右侧箭头 -->
    {% if page.has_next %}
    <a href="{{ url_for('user.about', page=page.next_num) }}" class="pagination-arrow"
       id="next-page" aria-label="Next Page">></a>
    {% else %}
    <a href="javascript:;" class="pagination-arrow"
       aria-label="Next Page">></a>
    {% endif %}
</div>

</body>
</html>